<template>
	<view class="item-detail-wrapper  u-margin-top-30">
		<text class="item-detail-wrapper-text">{{label}}</text>
		<view class="item-detail-wrapper-content u-padding-left-20">
			<template v-if="type ==='text'">
				<text class="item-detail-wrapper-content-text" :style="TextColorStyle">{{value | ValueText(unit) }}</text>
			</template>
			<template v-if="type ==='html'">
				<rich-text :nodes="Value || []"></rich-text>
			</template>
			<template v-if="type ==='rate'">
				<u-rate :count="5" active-color="#EBB917" inactive-color="#b2b2b2" disabled :current="Value"></u-rate>
			</template>
			<template v-if="type ==='attachment'">
				<template v-if="AttachmentList.length">
					<text class="item-detail-wrapper-content-attachment attachment" v-for="(item,index) in AttachmentList" :key="index" @click="$open(item.url)">{{item.name | rightEllipsis}}</text>
				</template>
				<template v-else>
					<text class="item-detail-wrapper-content-text">-</text>
				</template>
			</template>
		</view>
	</view>
</template>

<script>
	export default {
		filters: {

			ValueText(val, unit) {
				if (val == 0 || val == '0' || val == "0") {
					return `${val}${unit}`
				} else if (val) {
					return `${val}${unit|| ''} `
				} else {
					return '-'
				}
			}
		},
		props: {
			label: {
				type: String,
				default: 'label'
			},
			value: {
				type: [Number, String],
				default: ""
			},
			unit: {
				type: String,
				default: ''
			},
			textColor: {
				type: String,
				default: ''
			},
			type: {
				type: String,
				//text  rate attachment html
				default: 'text'
			}

		},
		computed: {
			Value() {
				return this.value
			},
			TextColorStyle() {
				if (this.textColor) {
					return `color:${this.textColor}`

				}
				return ''

			},
			AttachmentList() {

				if (this.type === 'attachment') {
					if (this.value) {
						return JSON.parse(this.value)
					}
				}
				return []
			}
		}

	}
</script>

<style lang="scss" scoped>
	.attachment {
		&+& {
			margin-top: 30rpx;
		}
	}

	.item {
		&-detail {
			&-wrapper {

				&::after,
				&::before {
					clear: both;
					display: block;
					content: '';
				}

				display: flex;

				&-text {
					// flex: 1;
					// float: left; 
					font-weight: 400;
					font-size: 28rpx;
					color: #98A5B3;
					white-space: nowrap;
				}

				&-content {
					// flex: 4;
					display: flex;
					flex-direction: column;

					&-text {
						font-weight: 400;
						font-size: 28rpx;
						color: #0F2E4D;

					}

					&-attachment {
						font-weight: 400;
						font-size: 28rpx;
						color: #409EFF;


					}
				}
			}
		}

	}
</style>
